<template>
    <div class="uhome">
        <div class="user">
            <div class="l-basic">
                <div class="img-box">
                    <img loading="lazy"  v-aimgd="{ avatar: user.avatar, id: user.id, w: 280, name: user.userName }" />
                </div>
                <div class="basic">
                    <div class="name">{{ user.userName }}
                        <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in user.tagsList">
                            <i class="sm-tip" slot-content>{{tag.title}}</i>
                            <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                        </el-popover>
                    </div>
                    <div class="desc">{{ user.subhead ? user.subhead : '欢迎来到我的GAMEUI设计个人主页' }}</div>
                    <div class="stis-num">
                        <a>{{ user.seeStr }}<i>人气</i></a>
                        <a :href="'/publish/publishFans' + (isMySelf ? '' : '?u=' + userId)">{{ user.fansStr }}<i>粉丝</i></a>
                        <a :href="'/exclusiveSetting' + (isMySelf ? '' : '?u=' + userId)">{{ user.subscribeNum }}<i>关注</i></a>
                    </div>
                    <div class="addr">
                        <div class="text" :class="{'has-r-bod':(user.weiboUrl&&user.weiboUrl!='null')||(user.behanceUrl&&user.behanceUrl!='null')||(user.dribbbleUrl&&user.dribbbleUrl!='null')||(user.url&&user.url!='null')}">
                            {{ user.province }} {{ user.city }} {{ user.area&&user.area!='null'?user.area:'' }}
                        </div>
                        <el-popover popper-class="gm-info-pop" v-if="user.weiboUrl&&user.weiboUrl!='null'" placement="top-start"
                            trigger="hover">
                            <i class="sm-tip" slot-content>新浪微博</i>
                            <a slot="reference" class="link link-weibo" :href="user.weiboUrl" target="_blank"></a>
                        </el-popover>
                        <el-popover popper-class="gm-info-pop" v-if="user.behanceUrl&&user.behanceUrl!='null'" placement="top-start"
                            trigger="hover">
                            <i class="sm-tip" slot-content>behance</i>
                            <a slot="reference" class="link link-be" :href="user.behanceUrl" target="_blank"></a>
                        </el-popover>
                        <el-popover popper-class="gm-info-pop" v-if="user.dribbbleUrl&&user.dribbbleUrl!='null'" placement="top-start"
                            trigger="hover">
                            <i class="sm-tip" slot-content>dribbble</i>
                            <a slot="reference" class="link link-internet" :href="user.dribbbleUrl" target="_blank"></a>
                        </el-popover>
                        <el-popover popper-class="gm-info-pop" v-if="user.url&&user.url!='null'" placement="top-start" trigger="hover">
                            <i class="sm-tip" slot-content>个人网站</i>
                            <a slot="reference" class="link link-dib" :href="user.url" target="_blank"></a>
                        </el-popover>
                    </div>
                </div>
            </div>
            <div class="rbtns">
                <router-link to="/personal/personalData" class="edit-info" v-if="isMySelf">编辑资料</router-link>
                <template v-if="userId != loginUid && loginUid">
                    <a class="private-to" @click="handlePrivateTo">私信</a>
                    <a class="attention-to" :class="{'active':user.isSubscribe > 0}" @click="handleFollow">{{ user.isSubscribe > 0 ? '已关注' : '关注' }}</a>
                </template>
            </div>
        </div>
        <div class="topbar">
            <div class="t-box">
                <div class="main-tab">
                    <a :class="{ 'cur': tab == 1 }" @click="chooseTab(1)">发布<i>{{
                        nums.linggan + nums.article+nums.discover}}</i></a>
                    <a :class="{ 'cur': tab == 2 }" @click="chooseTab(2)">收藏<i>{{
                        nums.explorerArticleCount + nums.explorerImagesCount }}</i></a>
                    <a :class="{ 'cur': tab == 3 }" @click="chooseTab(3)">喜欢<i>{{
                        nums.praisedGameCount + nums.praisedImageCount + nums.praisedZuopinCount +nums.praisedArticleCount
                            }}</i></a>
                    <a :class="{ 'cur': tab == 4 }" @click="chooseTab(4)">资料</a>
                </div>
                <div class="seach-bx" v-if="tab != 4">
                    <form @submit.prevent="() => { return false; }">
                        <input type="text" v-model="params.title" @keypress.enter="handleSearch" placeholder="搜索"><i
                            v-if="params.title" @click="params.title = ''" class="clear-by-search"></i>
                    </form>
                </div>
            </div>
            <div class="sub-tab-wrap" v-if="tab != 4">
                <div class="sub-tab" v-if="tab == 1 || tab == 3">
                    <template v-if="tab == 1">
                        <a :class="{ 'cur': params.categoryId == '' }" @click="chooseSubTab('')">全部<i>{{
                            nums.linggan +nums.article+nums.discover }}</i></a>
                        <a :class="{ 'cur': params.categoryId == 22 }" @click="chooseSubTab(22)">游戏<i>{{ nums.linggan
                                }}</i></a>
                        <a :class="{ 'cur': params.categoryId == 55 }" @click="chooseSubTab(55)" v-if="tab == 3">截图<i>{{
                                nums.linggan }}</i></a>
                        <a :class="{ 'cur': params.categoryId == 1 }" @click="chooseSubTab(1)">作品<i>{{ nums.discover
                                }}</i></a>
                        <!-- <a :class="{ 'cur': params.categoryId == 50 }" @click="chooseSubTab(50)">短视频</a> -->
                        <a :class="{ 'cur': params.categoryId == 9 }" @click="chooseSubTab(9)">文章<i>{{ nums.article
                                }}</i></a>
                        <a class="la-manage" href="/publish/publishManage" v-if="isMySelf && tab == 1">管理</a>
                    </template>
                    <template v-else>
                        <!-- <a :class="{'cur':params.categoryId==''}" @click="chooseSubTab('')">全部</a> -->
                        <a :class="{ 'cur': params.categoryId == 22 }" @click="chooseSubTab(22)">游戏<i>{{
                                nums.praisedGameCount }}</i></a>
                        <a :class="{ 'cur': params.categoryId == 55 }" @click="chooseSubTab(55)" v-if="tab == 3">截图<i>{{
                                nums.praisedImageCount }}</i></a>
                        <a :class="{ 'cur': params.categoryId == 1 }" @click="chooseSubTab(1)">作品<i>{{
                                nums.praisedZuopinCount }}</i></a>
                        <!-- <a :class="{ 'cur': params.categoryId == 50 }" @click="chooseSubTab(50)">短视频</a> -->
                        <a :class="{ 'cur': params.categoryId == 9 }" @click="chooseSubTab(9)">文章<i>{{
                                nums.praisedArticleCount }}</i></a>
                        <a class="la-manage" href="/publish/publishManage" v-if="isMySelf && tab == 1">管理</a>
                    </template>
                </div>
                <div class="sub-tab" v-if="tab == 2">
                    <a :class="{ 'cur': folderType === '' }" @click="chooseFolderType('')">全部<i>{{
                        nums.explorerArticleCount +nums.explorerImagesCount }}</i></a>
                    <a :class="{ 'cur': folderType === 1 }" @click="chooseFolderType(1)">图片集收藏夹<i>{{
                        nums.explorerArticleCount
                            }}</i></a>
                    <a :class="{ 'cur': folderType === 0 }" @click="chooseFolderType(0)">单图收藏夹<i>{{
                            nums.explorerImagesCount
                            }}</i></a>
                    <!-- <a :class="{ 'cur': folderType === 2 }" @click="chooseFolderType(2)">短视频收藏夹</a> -->
                </div>
                <div class="r-funcs">
                    <!-- <span class="tip">已选中<i>4</i>个分组</span>
                    <a class="cancel-select-all" @click="isInEdit=false">取消全选</a>
                    <a class="select-all" @click="isInEdit=true">全选</a>
                    <a class="cate-to">分类至</a>
                    <a class="complete">完成</a> -->
                </div>
            </div>
        </div>
        <ul class="fav-datas" v-if="(tab == 1 || tab == 3) && params.categoryId != 40 && params.categoryId != 50">
            <li class="fav-d-item create-btn" v-if="isMySelf && tab == 1 && params.categoryId != ''">
                <a @click="toCreate">
                    <span class="plus-icon"></span>
                    <span class="text">发布</span>
                </a>
            </li>
            <template v-if="tab == 1">
                <a class="fav-d-item" :class="{'no-data':!item.id}" v-for="(item, i) in list" :key="i" :href="item.id&&listTopIds.includes(item.categoryTopId)?infoUrlEnum[item.topCategory.id].url + item.id:'#'" @click.prevent="() => { return false; }">
                    <template  v-if="listTopIds.includes(item.categoryTopId)">
                        <div class="img-flex-box">
                            <div class="main-img">
                                <img loading="lazy"  :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError" @click.prevent="toInfo(item.topCategory.id, item.id, i)"/>
                                <div class="ops" v-if="isMySelf || isAdmin">
                                    <a class="i-del" title="删除" @click.prevent="id = item.id; showDelConfirm = true;"></a>
                                    <a class="i-edit" title="编辑" target="_blank" @click.prevent="toPublish(item)"></a>
                                </div>
                            </div>
                            <span class="pnum">{{ item.totalImageCount }}</span>
                            <div class="cate-dsc">{{item.device}}{{item.categoryName?(item.device?' · ':'')+item.categoryName:''}}{{item.style?' · '+item.style:''}}{{item.era?' · '+item.era:''}}</div>
                            <div class="mbasic-mask"  @click.prevent="toInfo(item.topCategory.id, item.id, i)"></div>
                        </div>
                        <div class="left-icos">
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                                <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                                <img loading="lazy"   slot="reference" src="../../../assets/pro/common/new.png" alt="">
                            </el-popover>
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                            <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                            <img loading="lazy"  slot="reference" src="../../../assets/pro/common/hot.png" alt="">
                            </el-popover>
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.videoUrl'>
                                <i class="sm-tip" slot-content>内容含视频</i>
                                <img loading="lazy"  slot="reference" src="../../../assets/pro/common/video.png" alt="">
                            </el-popover>
                        </div>
                        <div class="bot-desc">
                            <span class="file-name">{{ item.title }}</span>
                            <span class="type-text">{{ infoUrlEnum[item.topCategory.id].name }}</span>
                        </div>
                        <div class="bot-author">
                            <div class="u">
                                <span class="img-box">
                                    <img loading="lazy" 
                                        v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                                </span>
                                <span class="name">{{ item.member.userName }}
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                                                <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                </el-popover>
                                </span>
                            </div>
                            <div class="rt">
                                <span class="like-num">{{ item.praiseStr }}</span>
                                <span class="vnum">{{ item.seeStr }}</span>
                            </div>
                        </div>
                    </template>
                </a>
            </template>
            <template v-else-if="tab == 3 && params.categoryId != 55">
                <a class="fav-d-item" :class="{'no-data':!item.id}" v-for="(item, i) in list" :key="i" :href="item.id&&listTopIds.includes(item.categoryTopId)?infoUrlEnum[item.topCategory.id].url + item.id:'#'"  @click.prevent="() => { return false; }">
                    <template  v-if="listTopIds.includes(item.categoryTopId)">
                        <div class="img-flex-box">
                            <div class="main-img">
                                <img loading="lazy"  :srcset="item.srcsets" v-lazy="item.lazy" @error="loadError" @click.prevent="toInfo(item.topCategory.id, item.id, i)"/>
                                <div class="ops" v-if="isMySelf && tab != 3">
                                    <a class="i-del" title="删除" @click.prevent="id = item.id; showDelConfirm = true;"></a>
                                    <a class="i-edit" title="编辑" target="_blank" @click.prevent="toPublish(item)"></a>
                                </div>
                            </div>
                        </div>
                        <div class="bot-desc">
                            <span class="file-name">{{ item.title }}</span>
                            <span class="type-text">{{ infoUrlEnum[item.topCategory.id].name }}</span>
                        </div>
                        
                        <div class="left-icos">
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                                <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                                <img loading="lazy"  slot="reference" src="../../../assets/pro/common/new.png" alt="">
                            </el-popover>
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                            <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                            <img loading="lazy"  slot="reference" src="../../../assets/pro/common/hot.png" alt="">
                            </el-popover>
                            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.videoUrl'>
                                <i class="sm-tip" slot-content>内容含视频</i>
                                <img loading="lazy"  slot="reference" src="../../../assets/pro/common/video.png" alt="">
                            </el-popover>
                        </div>
                        <div class="bot-author">
                            <div class="u">
                                <span class="img-box">
                                    <img loading="lazy" 
                                        v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 20, name: item.member.userName }" />
                                </span>
                                <span class="name">{{ item.member.userName }}
                                    <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in item.member.tagsList">
                                                <i class="sm-tip" slot-content>{{tag.title}}</i>
                                                <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                                                </el-popover>
                                </span>
                            </div>
                            <div class="rt">
                                <span class="like-num">{{ item.praiseStr }}</span>
                                <span class="vnum">{{ item.seeStr }}</span>
                            </div>
                        </div>
                    </template>
                </a>
            </template>
            <template v-else>
                <imgs ref="refImages" @loaded="scrollLoaded=true" :isself="isMySelf" />
            </template>
            <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0 && params.categoryId != 55">没有更多了</div>
            <Empty text="空空如也~" v-if="list.length == 0 && !isloading && params.categoryId != 55" />
        </ul>
                
        <div class="pro-page-layout" v-if="list.length>0&&tab==1">
            <el-pagination
                background @current-change="pageChange"
                :current-page="params.pageNum" :page-size="params.pageSize"
                layout="prev,pager,next" 
                :total="total">
            </el-pagination>
            <!-- <span class="page-prev" @click="handlePagePrev"></span>
            <span class="page-tip">第 {{queryParams.pageNum}} 页，共 {{totalPage}} 页</span>
            <span class="page-next" @click="handlePageNext"></span> -->
        </div>
        <!-- <Empty v-if="params.title&&list.length>0"/> -->

        <Folders @show="record={type:folderType};showCreate = true" @inedit="inEdit" v-if="tab == 2" ref="refFolder" :foldertype="folderType"
            :myself="isMySelf" />
        <Videos v-if="params.categoryId == 50" ref="refVideo" :isworklist="tab == 1" :showcreate="isMySelf"
            :myself="isMySelf" />

        <template v-if="tab == 4">
            <div class="basic-data">
                <div class="d-tit">基本信息</div>
                <div class="bdata-panel">
                    <div class="item"><label>用户名</label><span class="val-text">{{ user.userName }}</span></div>
                    <div class="item"><label>来自</label><span class="val-text">{{ user.province }} {{ user.city }}
                            {{ user.area }}</span></div>
                    <div class="item"><label>毕业院校</label><span class="val-text">{{ user.edu ? user.edu : '--' }}</span>
                    </div>
                    <div class="item"><label>微信</label><span class="val-text">{{ user.weixin ? user.weixin : '--'
                            }}</span>
                    </div>
                    <div class="item"><label>QQ</label><span class="val-text">{{ user.qq ? user.qq : '--' }}</span>
                    </div>
                    <div class="item"><label>简介</label><span class="val-text">{{ user.subhead ? user.subhead : '--'
                            }}</span>
                    </div>
                </div>
                <router-link class="to-edit" :to="'/personal/personalData'" v-if="isMySelf">编辑</router-link>
            </div>
            <div class="basic-data">
                <div class="d-tit">社交账号</div>
                <div class="bdata-panel">
                    <div class="item"><label>新浪微博</label><a class="val-text">{{ user.weiboUrl ? user.weiboUrl : '--'
                            }}</a>
                    </div>
                    <div class="item"><label>behance</label><a class="val-text">{{ user.behanceUrl ? user.behanceUrl :
                            '--' }}</a></div>
                    <div class="item"><label>dribbble</label><a class="val-text">{{ user.dribbbleUrl ? user.dribbbleUrl
                            : '--' }}</a></div>
                    <div class="item"><label>个站</label><a class="val-text">{{ user.url ? user.url : '--' }}</a></div>
                </div>
                <router-link class="to-edit" :to="'/personal/personalData'" v-if="isMySelf">编辑</router-link>
            </div>
            <div class="basic-data" v-if="user.tags">
                <div class="d-tit">技能专长</div>
                <div class="tags">
                    <a v-for="(tag, idx) in user.tags" :key="idx">{{ tag }}</a>
                    <!-- <a>blender</a>
                    <a>C4D</a>
                    <a>虚拟引擎</a>
                    <a>动态模拟</a> -->
                </div>
                <router-link class="to-edit" :to="'/personal/personalData'" v-if="isMySelf">编辑</router-link>
            </div>
        </template>

        <a-modal v-model="visible" destroyOnClose centered :footer="null" :closable="false" width="860px">
            <Notice ref="refNotice" @close="visible = false" :privatemember="privatemember" />
        </a-modal>

        <a-modal v-model="showDelConfirm" destroyOnClose centered :footer="null" :closable="false" width="366px">
            <div class="fav-component">
                <div class="fav-header">
                    系统提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                    确定删除吗？删除后当前内容都会被删除且不可恢复。
                </div>
                <div class="btns m-widbtns">
                    <a class="pro-default-btn" @click="handleConfirmDel">确认</a>
                    <a class="pro-confirm-btn" @click="showDelConfirm = false">取消</a>
                </div>
            </div>
        </a-modal>

        <a-modal v-model="showCreate" destroyOnClose centered :footer="null" :closable="false">
            <CreateFolder @close="onClose" :info="record" :foldertype="record.type" />
        </a-modal>

        <el-drawer :with-header="false" destroy-on-close :modal="false" append-to-body :visible.sync="showInfo"
            direction="btt">
            <!-- 游戏详情 -->
            <gameInfo @close="onInfoClose" v-if="pageType == 'game'" :id="currentId" />
            <!-- 作品详情 -->
            <workInfo @close="onInfoClose" v-else-if="pageType == 'work'" :id="currentId" @prev="onPrev" @next="onNext" />
            <!-- 文章详情 -->
            <articleInfo @close="onInfoClose" v-else-if="pageType == 'article'" :id="currentId" />
        </el-drawer>
    </div>
</template>

<script>
import Empty from '@/components/Empty'
import gameInfo from '@/components/gameInfo'
import articleInfo from '@/components/articleinfo'
import workInfo from '@/components/workinfo'
import CreateFolder from '@/components/CreateFolder'
import qs from 'qs'
import Folders from './folders'
import Imgs from './imgs'
import Videos from './videos'
import Notice from '@/components/Notice'
import api from '@/api/api'
export default {
    components: {  Notice, Imgs, Videos, Folders, CreateFolder, gameInfo, articleInfo, workInfo, Empty },
    data() {
        return {
            total:0,
            visitPage:0,
            scrollPosition:0,
            loginUid: '',
            nums: {
                praisedArticleCount:0,
                praisedZuopinCount:0,
                praisedImageCount:0,
                praisedGameCount:0,
                article: 0,//文章分类
                articleAll: 0,//总文章数
                discover: 0,//发现分类
                draft: 0,//文章草稿数
                explorerArticleCount: 0,//图片集文件夹
                explorerImagesCount: 0,//图片文件夹数
                explorerTotalCount: 0,//文件夹总数
                fansCount: 0,//粉丝
                linggan: 0,//灵感分类
                material: 0,//材质分类
                praisedCount: 0,//点赞数
                subscribeCount: 0,//关注
                publishTotalCount: 0,
                sortVideoCount: 0,
                collectCount: 0
            },
            isAdmin: false,
            isloading: true,
            currentIdx: 0,
            currentId: '',
            curFullPath: '',
            pageType: '',
            showInfo: false,
            record: {},
            showCreate: false,
            visible: false,
            id: '',
            showDelConfirm: false,
            listTopIds:[22,1,50,9],
            publishUrlEnum: {
                22: '/publish/publishGame',
                1: '/publish/publishWork',
                50: '/publish/publishVideo',
                9: '/publish/publishArticle'
            },
            infoUrlEnum: {
                22: { url: '/game/', name: '游戏' },
                1: { url: '/work/', name: '作品' },
                50: { url: '/video/', name: '短视频' },
                9: { url: '/article/', name: '文章' }
            },
            typeEnum: {

            },
            isMySelf: false,
            folderType: '',
            privatemember: {},
            showNotice: false,
            user: {
                tags: [],
                tagsList: [],
                avatar: ''
            },
            tab: 1,
            subTab: 1,
            id: '',
            userId: '',
            list: [],
            hasMore: true,
            params: {
                pageNum: 1,
                pageSize: 20,
                categoryId: '22',
                title: '',
                isAsc: 'desc',
                orderByColumn: 'createTime',
                userId: ''
            },
            scrollLoaded: false
        }
    },
    methods: {
        pageChange(page){
            $('body,html').animate({scrollTop:$('.topbar').offset().top+70},0)
            this.params.pageNum=page;
            this.queryList();
        },
        loadError(e){
            e.target.removeAttribute('srcset');
        },
        toCreate() {
            this.$router.push({path:this.publishUrlEnum[this.params.categoryId]});
        },
        onLoaded(e, item) {
            let domainUrl = this.$imgdomainurl + 'article-';
            let el = e.target;
            let _vtime = null;
            if (item.updateTime) {
                _vtime = item.updateTime;
            } else if (item.createTime) {
                _vtime = item.createTime;
            } else if (item.create_time) {
                _vtime = item.create_time.replace('T', ' ');
            }
            _vtime = new Date(_vtime).getTime();
            let srcsets = [];
            srcsets.push(domainUrl + item.id + '-' + _vtime + '@1x624.webp 1x');
            srcsets.push(domainUrl + item.id + '-' + _vtime + '@2x624.webp 2x');
            srcsets.push(domainUrl + item.id + '-' + _vtime + '@3x624.webp 3x');
            el.srcset = srcsets.join(',')
        },
        getimgObj(item) {
            let _vtime = null;
            if (item.updateTime) {
                _vtime = item.updateTime;
            } else if (item.createTime) {
                _vtime = item.createTime;
            } else if (item.create_time) {
                _vtime = item.create_time.replace('T', ' ');
            }
            _vtime = new Date(_vtime).getTime();
            return {
                src: this.$imgdomainurl + 'article-' + item.id + '-' + _vtime + '@1x624.webp',
                error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
        },
        async init() {
            let routeQuery = this.$route.query;
            if (routeQuery.cg) {
                this.params.categoryId = routeQuery.cg;
            } else {
                this.params.categoryId = '';
            }
            if (routeQuery.ft || routeQuery.ft === '0') {
                this.folderType = parseInt(routeQuery.ft);
            } else {
                this.folderType = '';
            }
            if (routeQuery.t) {
                this.tab = routeQuery.t;
            } else {
                this.tab = 1;
            }
            this.params.userId = this.userId;
            let res = await api.getMemberArticleAndExplorerStatistics(this.userId);
            this.nums = res.data;

            this.list=[];
            this.hasMore=true;
            this.scrollLoaded=false;
            this.queryList();
            if (localStorage.getItem('token')) {
                let curUser = JSON.parse(localStorage.getItem('userInfo'));

                //是否超管
                if (curUser.permission && curUser.permission.indexOf('/admin/article/edit') > -1) {
                    this.isAdmin = true;
                }
            }

            if (routeQuery.cg == 55) {
                this.$refs['refImages'].handleSearch();
            }
        },
        onPrev() {
            if (this.currentIdx == 0) {
                this.$amessage.warn('没有更多了')
                return;
            }
            this.currentIdx--;
            this.currentId = this.list[this.currentIdx].id;
        },
        onNext() {
            if (this.currentIdx == this.list.length - 1) {
                this.$amessage.warn('没有更多了')
                return;
            }
            this.currentIdx++;
            this.currentId = this.list[this.currentIdx].id;
        },
        onInfoClose() {
            window.history.pushState({}, 0, this.curFullPath);
            document.body.style.overflow = 'inherit';
            this.showInfo = false;
        },
        inEdit(_record) {
            this.record = _record;
            this.showCreate = true;
        },
        onClose(isRefresh) {
            this.showCreate = false;
            if (isRefresh) {
                this.$refs.refFolder.onClose(isRefresh);
            }
        },
        async handleConfirmDel() {
            let res = await api.delArticle({ id: this.id });
            if (res.code == 0) {
                this.$amessage.success('删除成功')
                this.showDelConfirm = false;
                this.handleSearch();
            }
        },
        toInfo(cateId, id, idx) {
            // this.currentIdx = idx;
            // if (cateId == 22) {
            //     this.pageType = 'game'
            // } else if (cateId == 1) {
            //     this.pageType = 'work'
            // } else if (cateId == 9) {
            //     this.pageType = 'article'
            // }
            // document.body.style.overflow = 'hidden';
            // this.currentId = id;
            // this.curFullPath = this.$route.fullPath;
            // window.history.pushState({}, 0, this.infoUrlEnum[cateId].url + id);
            // this.showInfo = true
            
            // this.$router.push({ path: this.infoUrlEnum[cateId].url + id })
            let routeData = this.$router.resolve({ path: this.infoUrlEnum[cateId].url + id })
            window.open(routeData.href, '_blank');
        },
        toPublish(item) {
            this.$router.push({ path: this.publishUrlEnum[item.categoryTopId] + '/' + item.id })
        },
        chooseFolderType(_type) {
            this.folderType = _type;

            this.pushHistory();
        },
        async handleFollow() {
            if (this.user.isSubscribe > 0) {
                let res = await api.cancelFollowTo(this.user.id);
                if (res.code == 0) {
                    this.user.isSubscribe = 0;
                    this.$amessage.success('已取消，有缘再见～')
                }
            }
            else {
                let res = await api.followTo(this.user.id);
                if (res.code == 0) {
                    this.$bhelper.addCirRecord('FOLLOW');
                    this.$store.dispatch('setLeftMenu',[])
                    this.user.isSubscribe = 1;
                    this.$amessage.success('关注+1，灵感不断！')
                }
            }
        },
        handlePrivateTo() {
            this.privatemember = this.user;
            this.showNotice = true;
            this.visible = true;
        },
        handleSearch(e) {
            if (e) e.target.blur();
            if (this.params.categoryId != 50) {
                if (this.tab != 2) {
                    this.hasMore = true;
                    this.scrollLoaded = false;
                    this.list = [];
                    this.params.pageNum = 1;
                    this.queryList();
                } else {
                    this.$refs['refFolder'].params.title = this.params.title;
                    this.$refs['refFolder'].handleSearch();
                }
            } else {
                this.$refs['refVideo'].params.title = this.params.title;
                this.$refs['refVideo'].handleSearch();
            }
        },
        pushHistory() {
            let urlParams = { t: this.tab, cg: this.params.categoryId, ft: this.folderType };
            window.history.pushState({}, 0, '/user/' + this.userId + '?' + qs.stringify(urlParams))
        },
        chooseTab(_tab) {
            if (_tab == 1) {
                this.params.categoryId = '';
            } else {
                this.params.categoryId = 22;
            }
            this.folderType = '';
            this.tab = _tab;
            this.pushHistory();
            if (_tab == 1 || _tab == 3) {
                this.params.pageNum = 1;
                this.hasMore = true;  
                this.scrollLoaded = false;
                this.list = [];
                this.queryList();
                // this.list = [];
            }
        },
        version(time) {
            let date = new Date(time)
            return date.getTime()
        },
        chooseSubTab(_cate) {
            this.params.categoryId = _cate;

            this.pushHistory();
            if (_cate != 40 && _cate != 50 && _cate != 55) {
                this.hasMore = true;
                this.scrollLoaded = false;
                this.list = [];
                this.params.pageNum = 1;
                this.queryList();
            }else if(_cate==55){
                let that=this;
                this.$nextTick(()=>{
                    that.$refs['refImages'].handleSearch();
                })
            }
        },
        onImgError(e) {
            e.target.src = require('../../../assets/pro/default_uimg.svg');
            e.target.srcset = require('../../../assets/pro/default_uimg.svg');
        },
        async queryMember() {
            let res = {};
            if(this.isMySelf){
                res=await api.getUserInfo();
            }else{
                res=await api.getMemberInfo({ id: this.userId, userId: this.loginUid, currentUserId: this.loginUid });
            }
            if (res.data.tags) {
                res.data.tags = res.data.tags.split(',');
            }
            this.user = res.data;
        },
        handleLoadingMore() {
            this.params.pageNum++;
            this.queryList()
        },
        async queryList() {
            // if (this.params.pageNum == 1) this.params.pageSize = 18;
            // else this.params.pageSize = 20;
            let that = this;

            let res = {};
            this.isloading = true;
            
            if(this.params.pageNum==1){
                // this.list=[]
            }
            if (this.tab == 1) {
                if (this.isMySelf) {
                    res = await api.articleMemberList(this.params);
                } else {
                    res = await api.getMemberArticles(this.params);
                }
            }
            else {
                let _type = {
                    '': '',
                    22: 0,
                    1: 1,
                    50: 2
                }
                let data = Object.assign({}, this.params);
                data.type = _type[data.categoryId];

                if (!data.categoryId) {
                    delete data.categoryId;
                }
                if (!data.type) {
                    delete data.type;
                }
                data.keyword = data.title;
                data.currentUserId = data.userId;
                delete data.userId;
                res = await api.myLikeList(data);
            }
            if(this.params.pageNum==1){
                // this.list=[];
            }
            this.isloading = false;
            let domainUrl=that.$imgdomainurl;
            res.data.map(item=>{
                let _vtime=null;
                if(item.updateTime){
                    _vtime=item.updateTime;
                }else if(item.createTime){
                    _vtime=item.createTime;
                }else if(item.create_time){
                    _vtime=item.create_time.replace('T',' ');
                }
                _vtime=new Date(_vtime).getTime();
                let srcsets=[];
                srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp 1x');
                srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@2x800.webp 2x');
                srcsets.push(domainUrl+'article-'+item.id+'-'+_vtime+'@3x800.webp 3x');
                item.srcsets=srcsets.join(',')
                item.lazy={
                    src:domainUrl+'article-'+item.id+'-'+_vtime+'@1x800.webp',
                    error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
                    loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
                }
            })
            if(this.tab==1){
                this.list =res.data;
            }else{
                this.list = [...this.list, ...res.data];
            }
            this.total=res.total;
            let totalPage = res.total % that.params.pageSize == 0 ? res.total / that.params.pageSize : parseInt(res.total / that.params.pageSize) + 1
            if (res.data && (res.data.length < that.params.pageSize || that.params.pageNum >= totalPage)) {
                that.hasMore = false
            } else {
                that.hasMore = true
            }
            that.scrollLoaded = true
        },
        docScroll(e){
            if(this.tab==1)return;
            this.scrollPosition=e.currentTarget.scrollY;
            let that=this;
            if (that.tab == 4) return
            let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight

            if (that.scrollLoaded == false) return
            if (that.tab == 2) {
                if (jHeight <= 200 && that.$refs['refFolder'].hasMore) {
                    that.scrollLoaded = false
                    that.$refs['refFolder'].loadNext()
                }
            }
            else if (that.params.categoryId == 50) {
                if (jHeight <= 200 && that.$refs['refVideo'].hasMore) {
                    that.scrollLoaded = false
                    that.$refs['refVideo'].loadNext()
                }
            }
            else if (that.params.categoryId == 55) {
                if (jHeight <= 200 && that.$refs['refImages'].hasMore) {
                    that.scrollLoaded = false
                    that.$refs['refImages'].loadNext()
                }
            }
            else {
                if (jHeight <= 200 && that.hasMore) {
                    that.scrollLoaded = false
                    that.handleLoadingMore()
                }
            }
        }
    },
    destroyed() {
        window.removeEventListener('scroll', this.docScroll);
    },
    activated(){
        // if(this.visitPage>0)
        // {
        //     this.loginUid = localStorage.getItem('userId');
        //     this.userId = this.$route.params.id;
        //     this.queryMember();
        //     this.init();
        // }
        // this.visitPage++;
        window.addEventListener('scroll', this.docScroll);
        let that=this;
        this.$nextTick(() => {
            window.scrollTo(0,that.scrollPosition)
        });
    },
    deactivated(){
        window.removeEventListener('scroll', this.docScroll);
    },
    watch: {
        $route(newd) {
            if(this.visitPage>0){
                if (newd.name != 'user') return;
                this.loginUid = localStorage.getItem('userId');
                this.userId = this.$route.params.id;


                this.isMySelf = this.userId == this.loginUid;
                this.queryMember();
                this.init();
            }
        }
    },
    async mounted() {
        this.loginUid = localStorage.getItem('userId');
        this.userId = this.$route.params.id;
        // this.loginUid = localStorage.getItem('userId');
        // this.userId = this.$route.params.id;

        this.isMySelf = this.userId == this.loginUid;
        this.queryMember();
        this.init();
    }
}
</script>
<style lang="less">
.uhome {
    padding-bottom: 100px;

    .basic-data {
        padding: 16px 21px;
        background: #171717;
        border-radius: 16px;
        margin-bottom: 20px;
        position: relative;

        .to-edit {
            position: absolute;
            right: 26px;
            top: 16px;
            color: #11CCB1;
            font-size: 14px;
            font-weight: normal;
        }

        .d-tit {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 14px;
        }

        .bdata-panel {
            font-size: 14px;

            // margin-bottom:52px;
            .item {
                margin-bottom: 20px;

                &:last-child {
                    margin-bottom: 0px;
                }

                label {
                    color: #969696;
                    min-width: 120px;
                    display: inline-block;
                }

                .val-text {
                    color: #fff;
                }
            }
        }

        .tags {
            user-select: none;

            a {
                background: #252528;
                color: #fff;
                line-height: 38px;
                border-radius: 38px;
                padding: 0px 31px 0px 28px;
                display: inline-block;
                margin-right: 16px;
            }
        }
    }

    >.user {
        display: flex;
        align-items: center;
        border-radius: 16px;
        // background: #171717;
        padding: 41px 40px;

        .l-basic {
            display: flex;
            align-items: center;
            width: 100%;

            .img-box {
                margin-right: 32px;
                min-width: 140px;

                img {
                    width: 140px;
                    height: 140px;
                    object-fit: cover;
                    border-radius: 140px;
                }
            }

            .basic {
                .name {
                    font-size: 26px;
                    font-weight: 500;
                    line-height: 37px;
                }

                .desc {
                    color: #86878D;
                    font-size: 14px;
                    line-height: 20px;
                    margin-top: 4px;
                }

                .stis-num {
                    display: flex;
                    font-size: 18px;
                    color: #fff;
                    font-weight: 500;
                    line-height: 25px;
                    margin: 15px 0px 17px 0px;

                    >a {
                        margin-right: 31px;
                    }

                    i {
                        font-style: normal;
                        color: #86878D;
                        font-size: 12px;
                        font-weight: normal;
                        margin-left: 5px;
                    }
                }

                .addr {
                    font-size: 14px;
                    color: #86878D;
                    height: 20px;
                    line-height: 20px;
                    display: flex;
                    align-items: center;

                    .text {
                        display: inline-block;
                        padding-right: 18px;
                        background: url('../../../assets/pro/user/local.svg') no-repeat;
                        padding-left: 25px;
                        &.has-r-bod{
                            border-right: 1px solid #3A3636;
                        }
                    }

                    .link {
                        width: 22px;
                        height: 22px;
                        margin-left: 10px;
                    }

                    .link-weibo {
                        background: url('../../../assets/pro/user/weibourl.svg') no-repeat;
                        margin-left: 18px;
                    }

                    .link-be {
                        background: url('../../../assets/pro/user/behance.svg') no-repeat;
                    }

                    .link-internet {
                        background: url('../../../assets/pro/user/dribbble.svg') no-repeat;
                    }

                    .link-dib {
                        background: url('../../../assets/pro/user/url.svg') no-repeat;
                    }
                }
            }
        }

        .rbtns {
            display: flex;
            align-items: center;

            a {
                transition: .1s all linear;
            }
        }

        .edit-info {
            color: #fff;
            background: #29272F;
            line-height: 40px;
            width: 100px;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            // font-weight:500;
            border-radius: 8px;
            margin-left: 20px;
            &:hover{
                background:#323232;
            }
        }

        .private-to {
            color: #fff;
            background: #29272F;
            line-height: 40px;
            width: 100px;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            // font-weight:500;
            border-radius: 8px;
            margin-left: 20px;
            &:hover{
                background:#242327;
            }
        }

        .attention-to {
            color: #fff;
            background: #11CCB1;
            line-height: 40px;
            width: 100px;
            text-align: center;
            display: inline-block;
            font-size: 14px;
            // font-weight:500;
            border-radius: 8px;
            margin-left: 20px;

            &:not(.active):hover {
                background: #0fab94;
            }
            &.active{
                background: #29272F;
                &:hover{
                    background:#242327;
                }
            }
        }
    }

    .topbar {
        border-radius: 16px;
        // height:135px;
        background: #181818;
        user-select: none;
        padding: 30px;
        margin: 21px 0px;

        .t-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;

            .main-tab {
                color: #969696;
                font-size: 16px;
                font-weight: 500;
                margin-left: 8px;

                a {
                    margin-right: 30px;

                    i {
                        color: #5D5C5C;
                        margin-left: 4px;
                        font-style: normal;
                        font-weight: normal;
                    }

                    &:last-child {
                        margin-right: 0px;
                    }

                    &.cur {
                        color: #fff;
                        border-bottom: 2px solid #fff;
                        padding-bottom: 4px;
                    }
                }
            }

            .seach-bx {
                width: 215px;

                // margin-right:15px;
                form {
                    display: flex;
                    background: #29272F;
                    align-items: center;
                    border-radius: 8px;
                }

                input {
                    background: #29272F;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 8px;
                    border: none;
                    padding-left: 36px;
                    color: #fff;
                    font-size: 14px;
                    background-image: url('../../../assets/pro/header/search_icon.svg');
                    background-repeat: no-repeat;
                    background-position: 14px center;
                    background-size: 16px 16px;
                    width: 100%;
                }


                .clear-by-search {
                    min-width: 14px;
                    height: 14px;
                    background: url('../../../assets/pro/cancel_search.svg') no-repeat;
                    background-size: cover;
                    margin-right: 10px;
                    cursor: pointer;
                }
            }
        }

        .sub-tab-wrap {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .r-funcs {
                font-size: 14px;

                .tip {
                    i {
                        font-style: normal;
                        color: #11CCB1;
                        margin: 0px 4px;
                    }
                }

                .cancel-select-all {
                    background: #29272F;
                    line-height: 40px;
                    border-radius: 10px;
                    width: 110px;
                    text-align: center;
                    color: #fff;
                    margin-left: 10px;
                    display: inline-block;
                    font-weight: 500;
                }

                .select-all {
                    background: #11CCB1;
                    line-height: 40px;
                    border-radius: 10px;
                    width: 110px;
                    text-align: center;
                    color: #fff;
                    margin-left: 10px;
                    display: inline-block;
                    font-weight: 500;
                }

                .cate-to {
                    background: #11CCB1;
                    line-height: 40px;
                    border-radius: 10px;
                    width: 110px;
                    text-align: center;
                    color: #fff;
                    margin-left: 10px;
                    display: inline-block;
                    font-weight: 500;
                }

                .complete {
                    background: #11CCB1;
                    line-height: 40px;
                    border-radius: 10px;
                    width: 110px;
                    text-align: center;
                    color: #fff;
                    margin-left: 10px;
                    display: inline-block;
                    font-weight: 500;
                }
            }
        }

        .sub-tab {
            margin-top: 30px;
            font-size: 14px;
            color: #969696;

            a:not(.la-manage) {
                line-height: 28px;
                display: inline-block;
                margin-right: 30px;
                padding: 0px 9px;

                i {
                    color: #5D5C5C;
                    margin-left: 4px;
                    font-style: normal;
                    font-weight: normal;
                }

                &.cur {
                    background: #242327;
                    border-radius: 28px;
                    color: #fff;
                }

                &:hover {
                    background: #242327;
                    padding: 0px 9px;
                    border-radius: 28px;
                    color: #fff;
                }
            }

            .la-manage {
                padding-left: 26px;
                border-left: 1px solid #5D5C5C;
                background: url('../../../assets/pro/user/manage.svg') no-repeat;
                background-position: right center;
                padding-right: 22px;
                background-size: 14px 11px;
                color: #969696;

                &:hover {
                    color: #fff;
                }

                // border:1px solid red;
            }
        }
    }

    .fav-datas {
        display: flex;
        flex-wrap: wrap;
        grid-gap: 20px;

        .fav-d-item {
            // width: 312px;
            width: calc((100% - 80px) / 5);
            min-height: 240px;
            // margin-right: 20px;
            // margin-bottom: 20px;
            background: #171717;
            border-radius: 16px;
            overflow: hidden;
            color: #fff;
            position: relative;
            border: 2px solid transparent;
            transition: .1s all linear;
            animation: opacity .2s linear;

            .left-icos {
                position: absolute;
                left: 10px;
                top: 10px;
                display: flex;
                align-items: center;

                img {
                    &:first-child {
                        margin-right: 10px;
                    }
                }
            }

            &:hover {
                border-color: #11CCB1;

                .img-flex-box {
                    img {
                        transform: scale(1.08);
                    }

                    .main-img {
                        .ops {
                            display: flex;
                        }
                    }
                }
            }

            &:nth-child(5n) {
                // margin-right: 0px;
            }

            &.create-btn {
                border: 2px dashed #424242;
                border-radius: 16px;
                transition: 0.1s all linear;
                min-height:351px;
                a {
                    // display: inline-block;
                    width: 100%;
                    height: 100%;
                    // text-align: center;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .plus-icon {
                        width: 40px;
                        height: 40px;
                        border-radius: 40px;
                        background-color: #29272f;
                        display: block;
                        text-align: center;
                        line-height: 40px;
                        // margin: 91px auto 18px auto;
                        margin-bottom: 12px;
                        background-image: url('../../../assets/pro/list_create_plusico.svg');
                        background-repeat: no-repeat;
                        background-size: 40px 40px;
                    }

                    .text {
                        font-size: 14px;
                        color: #fff;
                        font-weight: 500;
                    }
                }

                &:hover {
                    border-color: #fff;
                }
            }

            .img-flex-box {
                display: flex;
                align-items: center;
                position: relative;
                // height: 269px;

                .lt-img {
                    width: 204px;
                    height: 210px;
                    margin-right: 6px;
                    border-radius: 16px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .rt-img {
                    .next-img {
                        width: 102px;
                        height: 102px;
                        margin-bottom: 6px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .last-img {
                        width: 102px;
                        height: 102px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }
                }

                .main-img {
                    // height: 269px;
                    width: 100%;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .ops {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        display: none;
                        transition: .2s all linear;

                        a {
                            border-radius: 12px;
                            background: #FFFFFF;
                            width: 40px;
                            height: 40px;
                            transition: .2s all linear;

                            &:hover {
                                // opacity:.9;
                                background-color: #e1e1e1;
                            }
                        }

                        .i-del {
                            background-image: url('../../../assets/pro/i_del.png');
                            background-size: 22px 22px;
                            background-repeat: no-repeat;
                            background-position: center;
                            margin-right: 10px;
                        }

                        .i-edit {
                            background-image: url('../../../assets/pro/i_edit.png');
                            background-size: 22px 22px;
                            background-repeat: no-repeat;
                            background-position: center;
                        }
                    }
                }

                .author {
                    position: absolute;
                    bottom: 10px;
                    left: 9px;
                    background: rgba(255, 255, 255, 0.9);
                    border-radius: 12px;
                    padding: 10px 13px;
                    transition: 0.1s all linear;
                    width: 164px;
                    cursor: pointer;

                    &:hover {
                        background: rgba(255, 255, 255, 1);
                    }

                    .ar-tit {
                        font-size: 14px;
                        font-weight: 500;
                        color: #383737;
                        line-height: 20px;
                        margin-bottom: 5px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        background: url('../../../assets/pro/take_tit_icon.svg') no-repeat;
                        background-position: left center;
                        padding-left: 22px;
                    }

                    .u-box {
                        display: flex;
                        padding-left: 20px;

                        .name {
                            font-size: 14px;
                            color: #969696;
                            font-weight: 500;
                        }

                        .avatar {
                            width: 20px;
                            height: 20px;
                            border-radius: 20px;
                            margin-right: 7px;
                        }
                    }
                }

                .at-btn {
                    color: #fff;
                    font-size: 14px;
                    background-color: #11CCB1;
                    border-radius: 12px;
                    line-height: 44px;
                    background-image: url('../../../assets/pro/un_follow_ico.svg');
                    background-repeat: no-repeat;
                    background-position: 11px center;
                    // width:82px;
                    padding-left: 35px;
                    padding-right: 19px;
                    text-align: center;
                    position: absolute;
                    left: 10px;
                    top: 10px;
                }

                .ated-btn {
                    color: #383737;
                    font-size: 14px;
                    background-color: #fff;
                    border-radius: 12px;
                    line-height: 44px;
                    background-image: url('../../../assets/pro/cancel_follow_ico.svg');
                    background-repeat: no-repeat;
                    background-position: 11px center;
                    // width:82px;
                    padding-left: 35px;
                    padding-right: 19px;
                    text-align: center;
                    position: absolute;
                    left: 10px;
                    top: 10px;
                }

                .edit-btn {
                    color: #383737;
                    font-size: 14px;
                    background-color: #fff;
                    border-radius: 12px;
                    line-height: 44px;
                    width: 40px;
                    height: 40px;
                    text-align: center;
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    background-image: url('../../../assets/pro/edit_ico.svg');
                    background-repeat: no-repeat;
                    background-position: center center;
                }

                .hid-el {
                    // display: none;
                    transition: .1s all linear;
                    opacity: 0;
                }

                &:hover {
                    .hid-el {
                        // display: inline-block;
                        opacity: 1;
                    }
                }
            }

            .bot-desc {
                font-size: 16px;
                display: flex;
                justify-content: space-between;
                margin-top: 14px;
                align-items: center;
                padding-right: 16px;

                .file-name {
                    color: #fff;
                    font-weight: 500;
                    padding-left: 15px;
                    font-size: 16px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .zan-num {
                    color: #969696;
                    background: url('../../../assets/pro/dianzanicon.svg') no-repeat;
                    padding-left: 24px;
                    font-size: 12px;
                    background-position: left center;
                }

                .type-text {
                    border: 1px solid #4B4B52;
                    border-radius: 2px;
                    color: #848393;
                    font-size: 12px;
                    padding: 0px 5px;
                    line-height: 18px;
                    white-space: nowrap;
                    margin-left: 30px;
                }
            }

            .bot-author {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-left: 15px;
                margin-top: 9px;
                padding-bottom: 14px;
                padding-right: 16px;
                white-space: nowrap;
                .u {
                    display: flex;
                    // align-items: center;

                    .img-box {
                        width: 20px;
                        height: 20px;
                        margin-right: 6px;
                        // overflow: hidden;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 20px;
                        }
                    }
                }

                .like-num {
                    background: url('../../../assets/pro/icon_like2.svg') no-repeat;
                    background-position: left center;
                    background-size: 20px 20px;
                    padding-left: 22px;
                    line-height: 20px;
                }

                .vnum {
                    font-size: 12px;
                    background: url('../../../assets/pro/l_vnum.svg') no-repeat;
                    padding-left: 20px;
                    background-position: left center;
                    // color: #fff;
                    line-height: 20px;
                    margin-left:20px;
                    color:#52565A;
                }
            }
        }
    }
}
</style>